<template>
  <div class="home-container">
    <!-- Header -->
    <header class="header">
      <div class="header-left">
        <h1 class="system-title">新闻管理后台系统</h1>
      </div>
      <div class="header-right">
        <span class="welcome-text">
          <i class="user-icon">👤</i>
          {{ username }}
        </span>
        <button class="logout-btn" @click="handleLogout">
          <i class="logout-icon">🚪</i>
          退出
        </button>
      </div>
    </header>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Sidebar -->
      <aside class="sidebar">
        <el-menu
          :default-active="route.path"
          class="nav-menu"
          background-color="#001529"
          text-color="rgba(255, 255, 255, 0.65)"
          active-text-color="#ffffff"
          :router="true"
        >
          <!-- 广告相关菜单组 -->
          <el-sub-menu v-if="hasPermission(['advertisers', 'adcampaigns', 'income'])" index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>广告管理</span>
            </template>
            <el-menu-item v-if="hasPermission(['advertisers'])" index="/advertisers">广告主信息</el-menu-item>
            <el-menu-item v-if="hasPermission(['adcampaigns'])" index="/adcampaigns">广告投放计划</el-menu-item>
            <el-menu-item v-if="hasPermission(['income'])" index="/income">广告收入情况</el-menu-item>
          </el-sub-menu>

          <!-- 新闻相关菜单组 -->
          <el-sub-menu v-if="hasPermission(['news', 'newsreview'])" index="2">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>新闻</span>
            </template>
            <el-menu-item v-if="hasPermission(['news'])" index="/news">新闻管理</el-menu-item>
            <el-menu-item v-if="hasPermission(['newsreview'])" index="/newsreview">新闻审核</el-menu-item>
          </el-sub-menu>

          <!-- 系统通知相关菜单组 -->
          <el-sub-menu v-if="hasPermission(['systemNotice', 'checkNotice'])" index="3">
            <template #title>
              <el-icon><Bell /></el-icon>
              <span>系统通知</span>
            </template>
            <el-menu-item v-if="hasPermission(['systemNotice'])" index="/systemNotice">通知管理</el-menu-item>
            <el-menu-item v-if="hasPermission(['checkNotice'])" index="/readnotice">通知查看</el-menu-item>
          </el-sub-menu>

          <!-- 动态渲染其他菜单项 -->
          <template v-for="item in filteredMenuItems" :key="item.key">
            <el-menu-item :index="item.path">
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.label }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </aside>

      <!-- Content Area -->
      <main class="content">
        <div class="breadcrumb" v-if="$route.path !== '/'">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ getBreadcrumbTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="welcome-message" v-if="$route.path === '/'">
          <h2>欢迎登录课工场新闻管理系统</h2>
          <p class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作愉快！</p>
        </div>
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Document, User, ChatDotRound, Setting, ChatLineSquare, Location, Warning, Bell, Message, Shop, Calendar, Money } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const username = ref('')
const currentDate = ref('')
const userType = ref(Number(localStorage.getItem('userType')) || 0)
const permissions = ref(JSON.parse(localStorage.getItem('permissions') || '[]'))

// 检查是否有权限
const hasPermission = (requiredPermissions) => {
  return requiredPermissions.some(permission => permissions.value.includes(permission))
}

// 计算面包屑标题
const getBreadcrumbTitle = computed(() => {
  const pathMap = {
    '/news': '新闻管理',
    '/users': '用户管理',
    '/comments': '评论管理',
    '/feedback': '用户反馈',
    '/violated': '违规内容管理',
    '/reports': '用户举报信息管理',
    '/advertisers': '广告主管理',
    '/adcampaigns': '广告计划管理',
    '/income': '收入统计',
    '/systemNotice': '系统通知管理',
    '/readnotice': '系统通知查看',
    '/newsreview': '新闻审核管理'
  }
  return pathMap[route.path] || '首页'
})

onMounted(() => {
  // 从 localStorage 获取用户名
  username.value = localStorage.getItem('userName') || '管理员'
  // 设置当前日期
  console.log('当前用户类型:', userType.value)
  console.log('当前权限:', permissions.value)
  const date = new Date()
  currentDate.value = date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 菜单配置
const menuItems = [
  {
    key: 'violated',
    label: '违规内容管理',
    icon: 'Warning',
    path: '/violated'
  },
  {
    key: 'reports',
    label: '用户举报信息管理',
    icon: 'Bell',
    path: '/reports'
  },
  {
    key: 'comments',
    label: '评论管理',
    icon: 'ChatDotRound',
    path: '/comments'
  },
  {
    key: 'feedback',
    label: '用户反馈',
    icon: 'Message',
    path: '/feedback'
  },
  {
    key: 'users',
    label: '用户管理',
    icon: 'User',
    path: '/users'
  }
]

// 根据权限过滤菜单
const filteredMenuItems = computed(() => {
  return menuItems.filter(item => permissions.value.includes(item.key))
})

const handleLogout = () => {
  // 清除登录信息
  localStorage.removeItem('token')
  localStorage.removeItem('userName')
  localStorage.removeItem('userType')
  localStorage.removeItem('permissions')
  // 跳转到登录页
  router.push('/login')
}

const handleMenuClick = (path) => {
  router.push(path)
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  height: 60px;
  background-color: #409EFF;
  color: white;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.system-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.welcome-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.user-icon, .logout-icon {
  font-size: 1.2rem;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  background-color: #001529;
  height: 100%;
  overflow-y: auto;
}

.nav-menu {
  border-right: none;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.breadcrumb {
  background-color: white;
  padding: 16px 24px;
  margin-bottom: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.content {
  flex: 1;
  padding: 1.5rem;
  background-color: #f0f2f5;
  overflow-y: auto;
}

.welcome-message {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  text-align: center;
}

.welcome-message h2 {
  color: #1890ff;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.welcome-subtitle {
  color: #666;
  font-size: 1.1rem;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
